<template>
  <div class="header">
    <router-link to="/">
      <img class="logo" src="../../assets/logo.png"/>
    </router-link>
    <!--    <el-menu mode="horizontal" :router="true">-->
    <!--      <HeaderMenuItem :list="list"></HeaderMenuItem>-->
    <!--    </el-menu>-->

    <el-dropdown trigger="click" size="medium" v-for="item in list" style="margin-right: 10px;">
      <span class="el-dropdown-link" v-if="item.children != null">
        {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-button type="text" size="medium" @click="$router.push(item.path)" v-else>{{ item.name }}</el-button>
      <template #dropdown>
        <div class="nav-sub">
          <el-dropdown-menu v-for="item2 in item.children">
            <el-dropdown-item
                :disabled="item2.children != null"
                @click="$router.push(item2.path)">
              {{ item2.name }}
            </el-dropdown-item>
            <el-dropdown-item
                v-if="item2.children != null"
                v-for="item3 in item2.children"
                @click="$router.push(item3.path)">
              {{ item3.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </div>
      </template>
    </el-dropdown>

    <div class="flex1"></div>
    <el-avatar size="medium" :src="loginUser.image"></el-avatar>
    <el-dropdown size="medium" @command="onCommand">
      <span class="el-dropdown-link">
        &nbsp;{{ loginUser.name }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="1">个人信息</el-dropdown-item>
          <el-dropdown-item command="2">修改密码</el-dropdown-item>
          <el-dropdown-item command="3" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import HeaderMenuItem from './header-menu-item.vue'
import {useStore} from "vuex";
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

export default {
  components: {
    HeaderMenuItem
  },
  setup() {
    const state = reactive({
      list: null,
      loginUser: null,
    })
    const router = useRouter()
    const store = useStore()
    state.list = store.state.user.resources
    state.loginUser = store.state.user.loginUser || {}

    const onCommand = (value) => {
      if (value === '3') {
        store.commit('logout')
        router.replace({path: '/login'})
      }
    }

    return {
      ...toRefs(state),
      onCommand,
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #c6e2ff;
}

.logo {
  height: 40px;
  margin-right: 20px;
  vertical-align: middle;
}

.nav {
  margin-right: 5px;
}

.nav-sub {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
</style>
